<template>
  <!-- 1.头部 -->
  <div class="headBox">
    <!-- 字体图标new -->
    <span class="iconfont iconnew"></span>
    <!-- 搜索框 -->
    <div class="search" @click="$router.push('search')">
      <!-- 搜索图标 -->
      <span class="iconfont iconsearch"></span>搜索新闻
    </div>
    <!-- 用户字体图标 -->
    <span class="iconfont iconwode" @click="$router.push('/personal')"></span>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.headBox {
  display: flex;
  box-sizing: border-box;
  height: 15vw;
  padding: 2.778vw 3.889vw;
  background: red;
  color: #fff;
  .iconnew {
    height: 10vw;
    line-height: 10vw;
    font-size: 13.889vw;
  }
  .search {
    margin-left: 3.333vw;
    margin-right: 6.667vw;
    background: rgba(255, 255, 255, 0.5);
    height: 10vw;
    line-height: 10vw;
    border-radius: 5vw;
    font-size: 4.444vw;
    text-align: center;
    flex: 1;
    .iconsearch {
      margin-right: 2.778vw;
      font-size: 4.444vw;
    }
  }
  .iconwode {
    color: rgba(255, 255, 255, 0.6);
    height: 10vw;
    line-height: 10vw;
    font-size: 7.222vw;
  }
}
</style>